<template>
  <div class="outside">
    <div class="chuchai">
      外勤打卡
      <i class="el-icon-star-on"></i>
      <i class="el-icon-s-tools"></i>
      <i class="el-icon-more"></i>
    </div>

    <div class="opes">
      <el-button size="small" @click="drawer = true">发起新的</el-button>
      <!-- headers 设置上传请求头 -->
      <!-- data 上传请求需要携带的参数 -->
      <!-- action 上传地址 -->
      <!-- name 上传字段, 字段值必须是 excel -->

      <!-- on-success 文件上传成功时的回调 -->
      <el-upload
        :show-file-list="false"
        :on-success="onSuccess"
        class="upload"
        :headers="headers"
        :data="{ userid: userinfo._id }"
        name="excel"
        action="/api/outside/import"
      >
        <el-button size="small">导入</el-button>
      </el-upload>

      <el-button size="small">
        <el-link :href="'/api/outside/download?userid=' + userinfo._id"
          >导出</el-link
        >
      </el-button>
    </div>

    <!-- 表格 -->
     <el-tabs v-model="activeName" >
      <el-tab-pane label="待办事项" name="1">
        <!-- 渲染OutsideTable表格组件 -->
        <OutsideTable 
        :columns="columns"
        :total="total"
        :outsidelist="outsidelist" 
        :handleCurrentChange="handleCurrentChange" 
        :deleteRow="deleteRow">
        </OutsideTable>
      </el-tab-pane>
      <el-tab-pane label="已办事项" name="2">已办事项</el-tab-pane>
      <el-tab-pane label="抄送事项" name="3">抄送事项</el-tab-pane>
      <el-tab-pane label="我发起的" name="4">我发起的</el-tab-pane>
      <el-tab-pane label="全部数据" name="5">全部数据</el-tab-pane>
      <el-tab-pane label="统计报表" name="6">
        <!-- 绘制图表的位置 -->
        <MyEchart></MyEchart>
      </el-tab-pane>
    </el-tabs>

    

    <!-- 抽屉 -->
    <el-drawer :visible.sync="drawer">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="outside-box"
      >
        <h3 class="title">外勤打卡</h3>
        <el-form-item label="打卡人" prop="name">
          <el-input
            type="text"
            v-model="ruleForm.name"
            autocomplete="off"
            placeholder="打卡人"
          ></el-input>
        </el-form-item>

        <el-form-item label="打卡类型" prop="checktype">
          <el-select v-model="ruleForm.checktype" placeholder="请选择打卡类型">
              <el-option
                v-for="item in checktypelist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="打卡时间" prop="checktime">
          <el-date-picker
            v-model="ruleForm.checktime"
            type="date"
            placeholder="选择打卡时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="申请时间" prop="time">
          <el-date-picker
            v-model="ruleForm.time"
            type="date"
            placeholder="选择申请时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item class="form-footer">
          <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import OutsideTable from '../../components/OutsideTable.vue'
import MyEchart from '../../components/MyEchart.vue'
import { outside_add, outside_list, outside_delete } from "../../utils/api";
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error("请输入正确的打卡人姓名"));
      } else {
        callback();
      }
    };
    var validatechecktype = (rule, value, callback) => {
      if (value.length<1) {
        callback(new Error("请选择打卡类型"));
      } else {
        callback();
      }
    };
    var validatechecktime = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择打卡时间"));
      } else {
        callback();
      }
    };
    var validatetime = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择申请时间"));
      } else {
        callback();
      }
    };

    return {
      headers: { Authorization: "Bearer " + localStorage.getItem("token") },
      drawer: false, //控制抽屉组件是否显示
      total: 0, //出差申请总数
      page: 1, //页码
      outsidelist: [],
      ruleForm: {
        name: this.$store.state.userinfo.name,
        checktype: "",
        checktime: "",
        time: "",
        
      },
      rules: {
        name: [
          //validator 验证器 , trigger 触发器
          { validator: validateName, trigger: "blur" },
        ],
        checktype: [{ validator: validatechecktype, trigger: "blur" }],
        checktime: [{ validator: validatechecktime, trigger: "blur" }],
        time: [{ validator: validatetime, trigger: "blur" }],
      },
      checktypelist:[
        {
          value:'0',
          label:'补卡'
        },
        {
          value:'1',
          label:'正常打卡'
        }
      ],
      activeName: "1",
      columns: [
        {
          prop: "_id",
          label: "编号",
        },
        {
          prop: "status",
          label: "当前流程状态",
          formatter: this.formater_status,
        },
        {
          prop: "name",
          label: "打卡人",
        },
        {
          prop: "checktype",
          label: "打卡类型",
          formatter: this.formater_checktype,
        },
        {
          prop: "checktime",
          label: "打卡时间",
        },
        {
          prop: "time",
          label: "申请时间",
          formatter: this.formater_time,
        },
        
      ],
    };
  },
  components: {
    OutsideTable,
    MyEchart,
  },
  mounted() {
    outside_list({ userid: this.userinfo._id, page: 1 }).then((res) => {
      this.outsidelist = res.data.list;
      this.total = res.data.total;
    });
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          outside_add({ userid: this.userinfo._id, ...this.ruleForm }).then(
            (res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.drawer = false; //隐藏抽屉
              } else {
                this.$message.error(res.data.msg);
              }
            }
          );
        } else {
          console.log("验证失败");
        }
      });
    },
    formater_status(row, column, cellValue, index) {
      return cellValue == 0 ? "待审批" : "已通过";
    },
    formater_checktype(row, column, cellValue, index) {
      return cellValue == 0 ? "补卡" : "正常打卡";
    },

    formater_num(num) {
      return num < 10 ? "0" + num : num;
    },

    formater_time(row, column, index) {
      var d = new Date();
      return `${d.getFullYear()}-${ this.formater_num( d.getMonth()+1 ) }-${ this.formater_num( d.getDate() ) }  ${ this.formater_num( d.getHours() ) }:${ this.formater_num( d.getMinutes() ) }:${ this.formater_num( d.getSeconds() ) }` ;
    },
    handleCurrentChange(val) {
      this.page = val; //保存页码
      //请求对应页码的数据
      outside_list({ userid: this.userinfo._id, page: val }).then((res) => {
        this.outsidelist = res.data.list;
      });
    },
    deleteRow(id) {
      //删除对应id的 出差申请
      outside_delete({ userid: this.userinfo._id, id, page: this.page }).then(
        (res) => {
          this.outsidelist = res.data.list;
          this.total = res.data.total;
        }
      );
    },
    onSuccess(res) {
      if (res.code == 200) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>

<style lang="scss">
.outside {
 .chuchai{
     color: #000;
      font-size: 25px;
      font-weight: 700;
      i:nth-child(1){
        color:goldenrod;
        font-size: 30px;
        margin-left: 10px;
      }
       i:nth-child(2){
        color:gray;
        font-size: 25px;
        margin-left: 10px;
      }
       i:nth-child(3){
        color:gray;
        font-size: 25px;
        margin-left: 10px;
      }
  }
}
.opes {
  margin: 20px 0;
  display: flex;
  .upload {
    margin: 0 20px;
  }
}
.outside-box {
  padding: 20px;
  .title {
    margin-bottom: 20px;
  }
}
.pagination {
  margin-top: 20px;
}
#main{
  width: 500px;
  height: 300px;
}
</style>